<template>
  <view class="main">
    <view class="specification-list">
      <view v-for="(spec, index) in spec.slice(1, spec.length)" :key="index">
        <view :id="'spec-' + spec.id" :class="['specification-item', { 'last-item': index === spec.length - 1 }]" @click="toggleDetails(index + 1)">
          <view class="specification-name-box">
            <view class="specification-name">{{ spec.name }}</view>
            <view class="del-btn">删除</view>
          </view>
          <view class="arrow">{{ spec.expanded ? '▼' : '▶' }}</view>
        </view>
        <view v-if="spec.expanded" class="specification-details" :id="'details-' + spec.id">
          <view v-for="(attribute, attrIndex) in spec.attributes" :key="attrIndex" :id="'attribute-' + attribute.id + '-' + attrIndex" class="specification-attribute">
            <view class="text">{{ attribute.name }}</view>
            <view class="del-btn">删除</view>
          </view>
        </view>
      </view>
    </view>

    <view class="add-button" @click="openAddModal">
      <image src="/static/images/add.png" class="add-icon"></image>
    </view>

    <!-- 遮罩层 -->
    <view class="mask" v-if="showPop" @click="closePop"></view>
    <!-- 弹框内容 -->
    <view class="dialog" :class="{'slide-up': showPop, 'slide-down': !showPop}">
      <view class="header-box">
        <view class="title">规格-属性</view>
        <view class="close" @click="closePop">X</view>
      </view>
      <scroll-view class="content" scroll-y>
        <view class="spec-box">
          <view class="spec-picker">
            <picker @change="changeShop" :range="spec" :value="spec_index" range-key="name">
              <view>{{ spec_index == 0 ? '选择已有规格' : spec[spec_index].name }}</view>
            </picker>
            <image class="icon" src="../../static/images/bottom.png"></image>
          </view>
          <view class="add-spec-box">
            <input type="text" class="spec-input" placeholder="请输入新规格名称"/>
            <view class="add-spec-btn">确认添加</view>
          </view>
          <view class="now-spec">当前选中规格：
            <text class="text">规格1</text>
          </view>
        </view>
        <view class="attr-box">
          <view class="add-attr-box">
            <input type="text" placeholder="中文逗号分隔，可添加多个属性" class="attr-input">
            <view class="add-attr-btn">确认添加</view>
          </view>
          <view class="attr-list">
            <view class="attr">
              <view class="name">属性1</view>
              <view class="icon">X</view>
            </view>
            <view class="attr">
              <view class="name">属性1</view>
              <view class="icon">X</view>
            </view>
            <view class="attr">
              <view class="name">属性1</view>
              <view class="icon">X</view>
            </view>
          </view>
        </view>
      </scroll-view>
      <view class="save-btn">保存</view>
    </view>

  </view>


</template>

<script>
export default {
  data() {
    return {
      showPop: true,
      spec_index: 0,
      spec: [
        {
          id: 0,
          name: '请选择规格'
        },
        {
          id: 1,
          name: '规格1',
          expanded: false,
          attributes: [
            {id: 1, name: '属性1'},
            {id: 2, name: '属性2'},
            {id: 3, name: '属性3'}
          ]
        },
        {
          id: 2,
          name: '规格2',
          expanded: false,
          attributes: [
            {id: 4, name: '属性A'},
            {id: 5, name: '属性B'}
          ]
        }
        // Add more spec as needed
      ]
    };
  },
  methods: {
    toggleDetails(index) {
      this.spec[index].expanded = !this.spec[index].expanded;
    },
    openPop: function () {
      this.showPop = true;
    },
    closePop: function () {
      this.showPop = false;
    },
    openAddModal: function () {
      console.log(111)
      this.showPop = true;
    },
  }
};
</script>

<style lang="scss">
.main {
  position: relative;

  .specification-list {
    padding: 10px;

    .specification-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 20rpx;
      border-bottom: 1rpx solid #ccc;
      background-color: #fff;

      .specification-name-box {
        display: flex;
        justify-content: space-between;
        width: 88%;

        .specification-name {
          flex: 1;
        }

        .del-btn {
          color: red;
        }
      }

      .arrow {
        font-size: 32rpx;
        color: #999;
        transition: transform 0.3s ease-in-out;
      }
    }

    .last-item {
      border-bottom: none;
    }

    .specification-details {
      overflow: hidden;
      transition: max-height 0.3s ease-in-out;
    }

    .specification-attribute {
      display: flex;
      justify-content: space-between;
      padding: 20rpx;
      border-bottom: 1rpx solid #ccc;
      background-color: #f1efef;

      .del-btn {
        color: red;
      }
    }
  }

  .dialog {

    .header-box {
      width: calc(100% - 40rpx);
      display: flex;
      justify-content: space-between;
      padding: 20rpx;
      border-bottom: 1rpx solid #e5e5e5;

      .title {
        font-size: 32rpx;
        font-weight: bold;
      }
    }

    .content {
      margin-left: 40rpx;
      overflow: auto;
      padding-bottom: 100rpx;

      .spec-box {
        width: calc(100% - 40rpx);

        .spec-picker {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 20rpx;
          margin-top: 20rpx;
          border: 1rpx solid #e5e5e5;

          picker {
            flex: 1;
          }

          .icon {
            width: 26rpx;
            height: 26rpx;
            margin-left: 20rpx;
          }
        }

        .add-spec-box {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-top: 20rpx;
          padding-bottom: 20rpx;

          .spec-input {
            border: 1rpx solid #e5e5e5;
            flex: 1;
            margin-right: 20rpx;
            padding: 16rpx 20rpx;
          }

          .add-spec-btn {
            padding: 20rpx 40rpx;
            background-color: #4cd964;
            color: #fff;
          }
        }

        .now-spec {
          font-size: 30rpx;

          .text {
            color: #ea1111;
          }
        }
      }

      .attr-box {
        width: calc(100% - 40rpx);
        margin-top: 20rpx;

        .add-attr-box {
          display: flex;
          justify-content: space-between;

          .attr-input {
            border: 1rpx solid #e5e5e5;
            padding: 20rpx;
            flex: 1;
            margin-right: 20rpx;
          }

          .add-attr-btn {
            padding: 20rpx 40rpx;
            background-color: #4cd964;
            color: #fff;
          }
        }

        .attr-list {
          display: flex;
          flex-wrap: wrap;

          .attr {
            display: flex;
            padding: 10rpx 20rpx;
            margin-right: 30rpx;
            margin-top: 20rpx;
            border: 1rpx solid #e5e5e5;

            .name {
              margin-right: 30rpx;
              flex-flow: nowrap;
            }

            .icon {
              padding-left: 20rpx;
              border-left: 1rpx solid #e5e5e5;
            }
          }
        }
      }
    }

    .save-btn {
      position: fixed;
      bottom: 0;
      left: 0;
      width: 100%;
      background-color: #4cd964;
      text-align: center;
      color: #fff;
      height: 80rpx;
      line-height: 80rpx;
    }

  }
}


</style>
